<%- include('../includes/head.ejs') %>
    <link rel="stylesheet" href="/css/product.css">
    <link rel="stylesheet" href="/css/message.css">
</head>

<body>
    <%- include('../includes/navigation.ejs') %>

    <main>
        <% if(messageType === 'success') { %>
            <div class="user-message user-message--success"><%= message %></div>
        <% } else if(messageType === 'alert') { %>
            <div class="user-message user-message--alert"><%= message %></div>
        <% } else if(messageType === 'error') { %>
            <div class="user-message user-message--error"><%= message %></div>
        <% } %>
        <% if(products.length > 0) { %>
            <div class="grid">
                <% for(let product of products) { %>
                    <article class="card product-item">
                        <header class="card__header">
                            <h1 class="product__title"><%= product.title %></h1>
                        </header>
                        <div class="card__image">
                            <img src="<%= product.imageUrl %>" alt="<%= product.title%>">
                        </div>
                        <div class="card__content">
                            <h2 class="product__price">$<%= product.price %></h2>
                            <p class="product__description"><%= product.description %></p>
                        </div>
                        <div class="card__actions">
                            <!-- <button class="btn" id="edit">Edit</button> -->
                            <a href="/admin/edit-product/<%= product._id %>?edit=true" class="btn">Edit</a>
                            <form action="/admin/delete-product" method="POST">
                                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                <button class="btn" type="submit">Delete</button>
                                <input type="hidden" name="productId" value="<%= product._id %>">
                            </form>
                        </div>
                    </article>
                <% } %>
            </div>
        <% } else { %>
            <h1>No Products Found</h1>
        <% } %>
    </main>
<%- include('../includes/end.ejs') %>
